<template>
  <div class="footer-page goods_info">
    <div class="content">
      <div class="base">
    <el-button class="hidden" @click="editPrice" type="primary">临时修改</el-button>
        <h5 class="blue-font">1、商品基础信息</h5>
        <div v-for="(item, index) in baseMeta" :key="index" class="flex info_item">
          <label>{{ item.label }}</label>
          <div class="flex-1">
            <template v-if="item.name === 'convey_type'">
              <p>寄出{{ item.convey_type1 }}-归还{{ item.convey_type2 }}</p>
            </template>
            <template v-else-if="item.name === 'service_province'">
              <p>{{ goodsInfo.province }}{{ goodsInfo.city === "" ? '' : ',' }}{{ goodsInfo.city }}</p>
            </template>
            <template v-else-if="item.name === 'imgurl'">
              <el-image style="width:120px;height:120px" :src="goodsInfo.imgurl ? $globalObj.imgBaseUrl + goodsInfo.imgurl : ''" :preview-src-list="[$globalObj.imgBaseUrl + goodsInfo.imgurl]">
                <div slot="error" class="image-slot">
                  <i class="el-icon-picture-outline" />
                </div>
              </el-image>
            </template>
            <template v-else-if="item.name === 'carousel_images'">
              <el-image v-for="(img, indexName) in goodsInfo.carousel_images" :key="indexName" style="width:120px;height:120px;margin-right:10px" :src="img ? $globalObj.imgBaseUrl + img : ''" :preview-src-list="[$globalObj.imgBaseUrl + img]">
                <div slot="error" class="image-slot">
                  <i class="el-icon-picture-outline" />
                </div>
              </el-image>
            </template>
            <template v-else-if="item.name === 'goods_content'">
              <p class="detail" v-html="goodsInfo.goods_content" />
            </template>
            <template v-else-if="item.name === 'attribute'">
              <p v-for="(attr, indexAttr) in goodsInfo.attribute" :key="indexAttr" class="attr_item">
                <span>{{ attr.field_title }}:</span>{{ attr.field_val }}
              </p>
            </template>
            <template v-else-if="item.name === 'pay_type'">
                <span>{{ goodsInfo.pay_type === "1" ? "智能合同" : "芝麻信用" }}</span>
            </template>
            <template v-else-if="item.name === 'pact_type'">
              <span v-for="(pect) in goodsInfo.pact_type" :key="pect" class="attr_item">
                <span>{{ pect === "1" ? "租完归还/续租/买断" : "租完即送" }}</span>
              </span>
            </template>
            <template v-else>
              <p>{{ goodsInfo[item.name] }}</p>
            </template>
          </div>
        </div>
      </div>
      <div class="meal">
        <h5 class="blue-font">2、商品价格与参数</h5>
        <div v-for="meal in goodsInfo.setmeal" :key="meal.id" class="meal_item">
          <div v-for="(item, indexSetmeal) in mealMeta" :key="indexSetmeal" class="flex info_item">
            <label>{{ item.label }}</label>
            <div class="flex-1">
              <template v-if="item.name === 'lease_set'">
                <!-- <p>{{meal.lease_set==1?"按天":meal.lease_set==2?"按月":"自定义租期"}}</p> -->
                <table v-if="meal.lease_set != 3" class="lease_table" cellspacing="0">
                  <tr v-if="leaseList[0].length === 0">
                    <!-- <th>租期</th> -->
                    <th style="width:230px">租赁方式</th>
                    <th v-for="lease in leaseList[1]" v-show="meal.id === lease.id" :key="lease.id">
                      {{ lease.lease_name }}
                    </th>
                  </tr>
                  <tr v-else>
                    <!-- <th>租期</th> -->
                    <th style="width:230px">租赁方式</th>
                    <th v-for="lease in leaseList[0]" v-show="meal.id === lease.id" :key="lease.id">
                      {{ lease.lease_name }}
                    </th>
                  </tr>
                  <tr v-show="Object.keys(leaseList[0]).length === 0 ? false : true">
                    <td>租完归还/续租/买断</td>
                    <td v-for="lease in leaseList[0]" v-show="meal.id === lease.id" :key="lease.id">
                      {{ lease.lease_price_2 }}
                    </td>
                  </tr>
                  <tr v-show="Object.keys(leaseList[0]).length === 0 ? false : true">
                    <td>市场价</td>
                    <td v-for="lease in leaseList[0]" v-show="meal.id === lease.id" :key="lease.id">
					  {{ lease.buyout_amount }}
                    </td>
                  </tr>
                  <tr v-show="Object.keys(leaseList[0]).length === 0 ? false : true">
                    <td>买断价</td>
                    <td v-for="lease in leaseList[0]" v-show="meal.id === lease.id" :key="lease.id">
                      {{ parseFloat(lease.buyout_amount - (lease.lease_price_2 * lease.lease_name.replace(/[^\d]/g, ''))).toFixed(2)>1? parseFloat(lease.buyout_amount - (lease.lease_price_2 * lease.lease_name.replace(/[^\d]/g, ''))).toFixed(2):0 }}
                    </td>
                  </tr>
                  <tr v-show="Object.keys(leaseList[1]).length === 0 ? false : true">
                    <td>租完即送</td>
                    <td v-for="lease in leaseList[1]" v-show="meal.id === lease.id" :key="lease.id">
                      {{ lease.lease_price_2 }}
                    </td>
                  </tr>
                  <tr v-show="Object.keys(leaseList[1]).length === 0 ? false : true">
                    <td>市场价</td>
                    <td v-for="lease in leaseList[1]" v-show="meal.id === lease.id" :key="lease.id">
					  {{ lease.buyout_amount }}
                    </td>
                  </tr>
                  <tr v-show="Object.keys(leaseList[1]).length === 0 ? false : true">
                    <td>买断价</td>
                    <td v-for="lease in leaseList[1]" v-show="meal.id === lease.id" :key="lease.id">
                      {{ parseFloat(0).toFixed(2) }}
                    </td>
                  </tr>
                </table>
                <el-table v-else class="set_table" :data="meal.spec" border>
                  <el-table-column align="center" label="期数" width="100px">
                    <template slot-scope="scope">
                      <span>第{{ scope.row.which_period }}期</span>
                    </template>
                  </el-table-column>
                  <el-table-column align="center" label="租赁天数" prop="lease_days" />
                  <el-table-column align="center" label="租期间隔">
                    <template slot-scope="scope">
                      <span>{{ scope.row.withhold_cycle }}天</span>
                    </template>
                  </el-table-column>
                  <el-table-column align="center" label="每期租金" width="200" prop="lease_price" />
                </el-table>
              </template>
              <template v-else-if="item.name === 'huabei_data'">
                <el-table v-if="meal.huabei_data" class="set_table" :data="meal.huabei_data" border>
                  <el-table-column align="center" label="租期设置" width="100px">
                    <template slot-scope="scope">
                      <span>{{ scope.row.lease_term ? (scope.row.lease_term + (meal.lease_set == 1 ? '个月' : '天')) : ''
                      }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column align="center" label="花呗总金额" prop="rent_total" />
                  <el-table-column label="花呗3期承担-承担金额" align="center">
                    <template slot-scope="scope">
                      {{ scope.row.three_bear }} {{ scope.row.three_fee ? '￥' + scope.row.three_fee : '' }}
                    </template>
                  </el-table-column>
                  <el-table-column label="花呗6期承担-承担金额" align="center">
                    <template slot-scope="scope">
                      {{ scope.row.six_bear }} {{ scope.row.six_fee ? '￥' + scope.row.six_fee : '' }}
                    </template>
                  </el-table-column>
                  <el-table-column label="花呗12期承担-承担金额" align="center">
                    <template slot-scope="scope">
                      {{ scope.row.twelve_bear }} {{ scope.row.twelve_fee ? '￥' + scope.row.twelve_fee : '' }}
                    </template>
                  </el-table-column>
                </el-table>
              </template>
              <template v-else-if="item.name === 'meal_img'">
                <el-image style="width:120px;height:120px;margin-right:10px" :src="$globalObj.imgBaseUrl + meal.meal_img" :preview-src-list="[$globalObj.imgBaseUrl + img]">
                  <div slot="error" class="image-slot">
                    <i class="el-icon-picture-outline" />
                  </div>
                </el-image>
              </template>
              <template v-else-if="item.name === 'buyout_amount'">
                <p>{{ meal.spec[0].buyout_amount }}</p>
              </template>
              <template v-else>
                <p>{{ meal[item.name] }}</p>
              </template>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="page-footer-btns">
      <el-button size="small" type="primary" @click="$router.back()">关闭</el-button>
    </div>
    <setGoodsDetail ref="setGoodsDetail"></setGoodsDetail>
  </div>
</template>

<script>
import { getGoodsInfo } from '@/api/audit'
import setGoodsDetail from './components/setGoodsDetail'
// import setDialog from './components/setDialog'

export default {
  components: { setGoodsDetail },
  // props: ['goodsId'],
  props: {
    goodsId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
	  edit:true, //编辑市场价
      goodsInfo: {},
      baseMeta: [
        {
          label: '商品品类',
          name: 'cate_name'
        },
        {
          label: '商品名称',
          name: 'title'
        },
        {
          label: '商品推广名称',
          name: 'extension_title'
        },
        {
          label: '推广关键字',
          name: 'spread_title'
        },
        {
          label: '商品属性',
          name: 'attribute'
        },
        {
          label: '新旧',
          name: 'new_grade'
        },
        {
          label: '租赁标签',
          name: 'rent_label'
        },
        {
          label: '起租日期',
          name: 'start_date'
        },
        {
          label: '商品销量',
          name: 'refuse'
        },
        {
          label: '商品封面',
          name: 'imgurl'
        },
        {
          label: '商品图片',
          name: 'carousel_images'
        },
        {
          label: '商品详情',
          name: 'goods_content'
        },
        {
          label: '租赁方式',
          name: 'pact_type'
        },
        {
          label: '产品合同类型',
          name: 'pay_type'
        },
        {
          label: '服务城市',
          name: 'service_province'
        },
        {
          label: '租赁地址',
          name: 'service_address'
        },
        {
          label: '运费',
          name: 'transfer_cost'
        },
        {
          label: '配送方式',
          name: 'convey_type'
        }
      ],
      mealMeta: [
        {
          label: '套餐名字',
          name: 'title'
        },
        {
          label: '商品图片',
          name: 'meal_img'
        },
        {
          label: '销售价',
          name: 'buyout_amount'
        },
        {
          label: '官网价',
          name: 'price'
        },
        {
          label: '库存',
          name: 'quantity'
        },
        {
          label: '租期设置',
          name: 'lease_set'
        }

      ],
      leaseList: [],
      tempId:''
    }
  },
  mounted() {
    console.log(this.goodsId);
    this.tempId=this.goodsId
    document.getElementsByClassName('app-main')[0].scrollTop = 0
    this.getData()
  },
  methods: {
	editPrice(){
    console.log(123);
		  // this.editItem = {
		  //   goodsId: this.goodsInfo.id
		  // }
		this.$refs.setGoodsDetail.dialogVisible = true
	},
    getData() {
      getGoodsInfo(this.goodsId).then(res => {
        // console.log('goodInfo=>', res);
        this.goodsInfo = res || {}
        this.goodsInfo.carousel_images = this.goodsInfo.carousel_images.split(',')
        const arr1 = [] // 存放固定租期
        const arr2 = [] // 存放租完即送
        for (let i = 0; i < res.setmeal.length; i++) {
          for (let j = 0; j < res.setmeal[i].spec.length; j++) {
            if (res.setmeal[i].spec[j].pact_type === 1) {
              arr1.push({
                id: res.setmeal[i].spec[j].setmeal_id,
                lease_name: res.setmeal[i].spec[j].lease_time,
                lease_price: res.setmeal[i].spec[j].lease_price,
                lease_price_2: res.setmeal[i].spec[j].day_price,
                buyout_amount: res.setmeal[i].spec[j].buyout_amount,
                spec: res.title + ' ' + res.setmeal[i].spec[j].spec + ' ' + res.setmeal[i].spec[j].color
              })
            } else if (res.setmeal[i].spec[j].pact_type === 2) {
              arr2.push({
                id: res.setmeal[i].spec[j].setmeal_id,
                lease_name: res.setmeal[i].spec[j].lease_time,
                lease_price: res.setmeal[i].spec[j].lease_price,
                lease_price_2: res.setmeal[i].spec[j].day_price,
                buyout_amount: res.setmeal[i].spec[j].buyout_amount,
                spec: res.title + ' ' + res.setmeal[i].spec[j].spec + ' ' + res.setmeal[i].spec[j].color
              })
            }
          }
        }
        this.leaseList[0] = arr1
        this.leaseList[1] = arr2
        // this.leaseList[0]=  arr1.filter((element,index,self)=>{
        //   return self.findIndex(x=>x.lease_name===element.lease_name) === index
        // })
        // this.leaseList[1]=  arr2.filter((element,index,self)=>{
        //   return self.findIndex(x=>x.lease_name===element.lease_name) === index
        // })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  border: 1px solid #e6e6e6;
}

.base,
.meal {
  padding: 30px;
}

.meal {
  border-top: 1px solid #e6e6e6;
}

.meal_item {
  padding: 20px 0 30px;
}

.meal_item+.meal_item {
  border-top: 1px solid #e6e6e6;
}

.detail {
  width: 500px;
  max-height: 500px;
  overflow: auto;
  min-height: 20px;
  padding-right: 20px;

  /deep/img {
    width: 100% !important;
  }
}

.info_item {
  margin-top: 20px;

  label {
    width: 120px;
    color: #666666;
    text-align: right;
    margin-right: 20px;
  }
}

.attr_item {
  span {
    margin-right: 10px;
  }

  &+.attr_item {
    margin-top: 10px;
  }
}

.lease_table {
  tr {
    height: 40px;
    line-height: 40px;

    &:first-child {
      background: #f5f5f5;
    }

    th,
    td {
      border: 1px solid #e6e6e6;
      width: 100px;
      text-align: center;

      &:not(:first-child) {
        border-left: none;
      }
    }

    th {
      font-weight: normal;
      border-bottom: none;
    }
  }
}

.set_table {
  max-width: 1000px;
}
.hidden{
	// background-color: #fff;
	// border: none;
	float:right;
	// color:#fff;
}
</style>
